Plugins

How to write your own plugin?

You have to use ChartReactAPI, to modify chart's behaviour. You should pass as a prop the callback ChartReactApp#onApiCreated.

An example:

import React from 'react';
import { ChartReactApp } from '@dx-private/dxchart5-react/dist/chart/chart-react-app';
import { CREATE_MOCK_PROVIDERS } from '@dx-private/dxchart5-react-mock-providers';
export const helloWorldPluginCallback = () => console.log('Hello World!');
React.createElement(ChartReactApp, {
    dependencies: CREATE_MOCK_PROVIDERS(),
    onApiCreated: api => api.onChartCreated(helloWorldPluginCallback),
});

Theoretically, plugins can change default chart behaviour, however, the main use-case of plugins is to draw something custom on the chart.

Chart-Core plugins

Chart-Core plugins should add or change logic related to canvas render process. For example, a plugin which allows to draw vertical lines for every Friday candle.

Related topics:

• Custom Drawer - add a fully custom drawer see this page
• Custom Drawing - add your own drawing
• Create X-Labels Provider - if you want custom X labels
• Create Y-Labels Provider - or if you want custom Y labels
• API Reference - using API from API-Reference is a recommended practice, if you can't find the suitable API for your task please ask us to add it

Chart-React plugins

Chart-React doesn't support plugins in general like Chart-Core, but you can override some functionality using these guides:

• Chart-React overriding overview
• Overriding Settings Tabs
• Overriding Toolbar Buttons
• [Overriding Toolbar Component](./dxcharts-react/Component Overriding/Toolbar/toolbar-component.tsx)